<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪元素选择器</title>
		<style>
			li {
				list-style: none;
			}

			.ul1>li:before {
				content: "";
				display: inline-block;
				background-color: #ff0000;
				width: 10px;
				height: 10px;
				border-radius: 50%;
				margin-right: 10px;
			}

			.ul1>li:after {
				content: "";
				display: inline-block;
				background-color: #000000;
				width: 10px;
				height: 10px;
				border-radius: 50%;
				margin-left: 10px;
			}
		</style>
	</head>
	<body>
		<h1>伪元素选择器</h1>
		<ul>
			<li>:before和:after是重点！</li>
			<li>在元素内部的前面和后面添加一个元素（伪标签）</li>
			<li>:before和:after必须加上content属性，即使是""</li>
			<li>如果要显示出来，记得设置display属性</li>
			<li>常用用法1：使用浮动布局时，父元素会塌陷，那么使用:after添加伪元素，设置clear:both，消除浮动影响</li>
		</ul>
		<h1>实验</h1>
		<ul>
			<li>在列表li，前面和后面加上圆点</li>
			<li>传统做法：在每个li前面和后面加上div标签，然后设置div的样式</li>
			<li>伪元素做法：直接使用:before和:after伪类选择器</li>
		</ul>
		<ul class="ul1">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
		</ul>
	</body>
</html>
